{% extends "v2ex/_base.html" %}
{% block title %}{{ data.title }}{% endblock %}
{% block rightbar %}{% endblock %}
{% block body %}
<div class="sep20"></div>
<div class="box">
    <div class="header" >
        <a href="#">SJZLUG</a>
        <span class="chevron"><span class="chevron">&nbsp;›&nbsp;</span>设置头像</span>
    </div>
    <div class="message">上传一个你喜欢喜的头像吧,体现你的品味和心情！</div>
    <div class="inner">
        <div style="height:10px;"></div>
        <span class="fade" style="color:#f00;">
        {% for message in get_flashed_messages() %}{{ message }}{% endfor %}
        </span>
        <div id="crop-avatar" class="avatar-body">
            <!-- Crop and preview -->
            <div class="row">
                <div class="col-md-9" style="padding-left:0px;padding-right:5px;">
                    <div class="avatar-wrapper">
                        <img id="avatar-image" >
                    </div>
                </div>
                <div class="col-md-3" style="padding-left:5px;padding-right:0px;">
                    <div class="avatar-preview preview-sm"></div>
                    <img id="croped-avatar" sytle="width:48px;height:48px;background-color:#ccc;">
                </div>
            </div>
            <div class="row avatar-btns">
                <div class="col-md-9 docs-buttons" style="padding-left:0px;padding-right:5px;">
                    <div class="btn-group">
                        <label class="btn btn-info">
                            <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                            <span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;选择图片
                        </label>
                        <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
                            <span class="glyphicon glyphicon-zoom-in"></span>&nbsp;&nbsp;放&nbsp;大
                        </button>
                        <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
                            <span class="glyphicon glyphicon-zoom-out"></span>&nbsp;&nbsp;缩&nbsp;小
                        </button>
                        <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
                            <span class="glyphicon glyphicon-repeat"></span>&nbsp;&nbsp;旋&nbsp;转
                        </button>
                        <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
                            <span class="glyphicon glyphicon-resize-horizontal"></span>&nbsp;&nbsp;水平镜像
                        </button>
                        <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
                            <span class="glyphicon glyphicon-resize-vertical"></span>&nbsp;&nbsp;垂直镜像
                        </button>
                    </div>
                </div>
                <div class="col-md-3 docs-buttons" style="padding-left:5px;padding-right:0px;">
                    <button type="button" class="btn btn-success btn-block avatar-save" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;:48, &quot;maxHeight&quot;:48}">
                        <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;&nbsp;保存
                    </button>
                </div>
                <form  method="post" action="/avatar" id="avatar-form" class="avatar-form" role="form" enctype="multipart/form-data">
                    {{data.form.hidden_tag()}}
                    <div style="display:none;">
                        {{data.form.avatar(class ="form-control")}}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="sep20"></div>
<link rel="stylesheet" type="text/css" media="screen" href="/static/v2ex/js/plugs/crop-avatar/css/cropper.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/static/v2ex/js/plugs/crop-avatar/css/main.css" />
<script src="/static/v2ex/js/plugs/crop-avatar/js/cropper.min.js"></script>
<!--<script src="/static/v2ex/js/plugs/crop-avatar/js/main.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
    var $previews = $('.avatar-preview');
    var $image = $('#avatar-image');
    var $inputImage = $('#inputImage');
    var URL = window.URL || window.webkitURL;
    var uploadedImageURL = "";
    var _croper = null; 
    var options = {
        aspectRatio: 1 / 1,
        preview: '.avatar-preview',
        crop: function (e) {
          //$dataX.val(Math.round(e.x));
          //$dataY.val(Math.round(e.y));
          //$dataHeight.val(Math.round(e.height));
          //$dataWidth.val(Math.round(e.width));
          //$dataRotate.val(e.rotate);
          //$dataScaleX.val(e.scaleX);
          //$dataScaleY.val(e.scaleY);
        }
    };

    if (URL) {
        $inputImage.change(function () {
            var files = this.files;
            var file;
            if (files && files.length) {
                file = files[0];
                if (/^image\/\w+$/.test(file.type)) {
                    uploadedImageType = file.type;
                    if (uploadedImageURL) {
                        URL.revokeObjectURL(uploadedImageURL);
                    }
                    uploadedImageURL = URL.createObjectURL(file);
                    $('#avatar-image')[0].src = uploadedImageURL;
                    _croper = $image.cropper({
                        aspectRatio: 1 / 1,
                        preview: '.avatar-preview',
                        //viewMode: 1,
                        //dragMode: 'move',
                        //autoCropArea: 0.65,
                        //restore: false,
                        //guides: false,
                        //highlight: false,
                        //cropBoxMovable: false,
                        //cropBoxResizable: false
                    });
                    $inputImage.val('');
                } else {
                    window.alert('Please choose an image file.');
                }
            }
        });
    } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
    }

    $('.avatar-save').click(function(){
        croppedCanvas = $image.cropper('getCroppedCanvas',{width:48,height:48});
        $('#avatar')[0].value = croppedCanvas.toDataURL();
        $('#croped-avatar')[0].src = croppedCanvas.toDataURL();
        var form = $('#avatar-form')[0]
        if (form){
            form.submit();
        }
    });

    $('#zoom-in').click(function(){
        $image.cropper('move',-10,0);
    });
    $('#zoom-out').click(function(){
        $image.cropper('move',-10,0);
    });

});
</script>
{% endblock %}
